<template>
  <div class="body-hp" style="overflow-y: auto" id="body-hp">
		<HeaDer></HeaDer>
    <div class="flex" style="background-color: #f8f9fb; width: 100%; padding: 10rem">
      <div class="flex space-between" style="width: 1532rem; margin-left: auto; margin-right: auto">
        <div class="flex">
          <div style="font-size: 18rem;color: #000;margin-right: 10rem;display: flex;justify-content: center;align-items: center;">
            当前位置:
          </div>
          <div style="display: flex; justify-content: center; align-items: center">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/hp' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item> 园区平台</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div>
				<div class="demo-input-suffix" style="display: flex;">
						<el-input clearable placeholder="请输入企业名称关键字查询" v-model="dName">
						</el-input>
						<el-button type="success" @click="handleQuery" style="margin-left: 6rem;" size="mini">搜索</el-button>
				</div>
		</div>
      </div>
    </div>
    <div class="top-content-pl body-pl">
			<div class="row-pl" style="background-color:#fff">
				<div class="tabs-pl">
					<div class="left-pl">企业性质：</div>
					<ul class="right-pl right1">
						<li v-for="(item,index) in tabs2_pl" :class="index==0?'on':''" @click="tabs1($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="dict in dict.type.enterprise_nature"  @click="tabs1($event,dict.value)" :key="dict.value" :value="dict.value">{{dict.label}}</li>
					</ul>
					<!-- <div class="btns-pl" @click="more_pl($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div> -->
				</div>
				
				<div class="tabs-pl">
					<div class="left-pl">行业类别：</div>
					<ul class="right-pl right2">
						<li v-for="(item,index) in tabs2_pl" :class="index==0?'on':''" @click="tabs2($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="dict in dict.type.customer_industry_serve" :class="index==0?'on':''" @click="tabs2($event,dict.value)" :key="dict.value" :value="dict.value">{{dict.label}}</li>
					</ul>
					<div class="btns-pl" @click="more_pl2($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div>
				</div>
				
				<!-- <div class="tabs-pl">
					<div class="left-pl">地域分区：</div>
					<ul class="right-pl right3">
						<li v-for="(item,index) in tabs3_pl" :class="index==0?'on':''" @click="tabs3($event,item.name)" :key="index">{{item.name}}</li>
						<li v-for="list in optionsArea" @click="tabs3($event,list.areaId)">
							<span>{{list.areaName}}</span>
						</li>
					</ul>
					<div class="btns-pl" @click="more_pl3($event)" style="margin-top:3px">
						<span style="color:#1890ff;">更多</span>
						<i style="color:#1890ff">收起</i>
					</div>
				</div> -->
			</div>
		</div>
    <div v-for="item in items" :key="item.deptId" class="flex third">
      <div class="third-left">
        <div class="flex">
          <div class="type">
            {{ formatterNature(item.nature) }}
          </div>
        </div>
        <el-link :underline="false" class="title" @click="goDetail(item.deptId)">{{ item.deptName }}</el-link>
        <div class="substance"  v-if="item.businessScope!=null">{{ item.businessScope }}</div>
		<div class="substance" v-else>公司主要经营*********</div>
        <div class="add">
            <!-- <img src="../../assets/images/jianshili/dingwei1_06.png"> -->
            <i class="el-icon-location-outline" v-if="item.address!=null">{{ item.address }}</i>
			<i class="el-icon-location-outline" v-else>湖南省湘潭市湘潭县********</i>
        </div>
        <el-button style="background-color:#299D60;color:#fff;margin-top:50rem" round @click="goDetail(item.deptId)">了解更多</el-button>
      </div>
	  <div >
        <img v-if="item.url!=null"
        	
        	width="516rem"
        	height="380rem"
        	:src='item.url'
      	/>
		  <img v-else
        	width="516rem"
        	height="380rem"
        	:src='require("../../assets/images/pl-img_12.jpg")'
      	/>
      </div>
	  
</div>
<el-empty :image-size="200" v-if="items.length == 0"></el-empty>
    <!-- <div class="forth">
			<el-pagination
				background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage4"
					:page-sizes="[100, 200, 300, 400]"
					:page-size="100"
					layout="total, sizes, prev, pager, next, jumper"
					:total="400">
				</el-pagination>
		</div> -->
		<div class="forth">
				<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getDeptList" :page-sizes="[12, 24, 36, 48]"/>
		</div>
		<FooTer></FooTer>
  
  </div>
</template>

<script>
import HeaDer from '../../components/HomePage/header'
import { listAreaAll } from "@/api/area/area";
import FooTer from '../../components/HomePage/footer'
import { listDeptAll} from "@/api/system/dept";
export default {
	dicts: ['enterprise_nature', 'customer_industry_serve'],
  name: "body-hp",
  data() {
    return {
		queryParams: {
                pageNum: 1,
                pageSize: 12,
                deptName: undefined,
                status: undefined,
				companyType:undefined,
				type:undefined,
				nature:undefined,
				industry:undefined,
				businessCode:undefined
        },
		items:[],
      	input1: "",
      	radio3: "央企",
      	radio4: "创新中小企业",
      	activeIndex: "1",
      	img_logo: require("../../assets/images/jianshili/hp_logo.png"),
      	tabs1_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			tabs2_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			tabs3_pl:[
				{
					name:"不限",
					value:'不限'
				},
			],
			total:0,
			currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
		queryParamsArea:{
				pageNum: 1,
                pageSize: 12,
				parentId:undefined
		},
		optionsArea:[],
		newNature:undefined,
		newType:undefined,
		dName:undefined
     
    
    };
  },
  components: {
		HeaDer,
		FooTer,
	
	},
  methods: {
	goDetail(platId) {
			this.$router.push("/platformdeta/" + platId);
	},
	getDeptList() {
        this.items = [];
		this.queryParams.businessCode = "enterprisePictrue";
        this.queryParams.companyType = "2";
        listDeptAll(this.queryParams).then(response => {
			console.log(response)
			this.items = response.rows;
			this.total = response.total;
        });
    },
	// getArea(){
	// 	this.optionsArea = []
	// 	this.queryParamsArea.parentId='376cca96-6269-4b0e-80a7-4f3420ee171a'
	// 	listAreaAll(this.queryParamsArea).then(response => {
	// 		console.log(response.data)
    // 		this.optionsArea = response.rows;
    // 	});
    // },
	formatterNature(value) {
			var type = "";
			this.dict.type.enterprise_nature.forEach(item => {
				if (item.value == value)
					type = item.label;
			});
			return type;
	},
	//关键字搜索
	handleQuery() {
			this.queryParams.pageNum = 1;
			this.queryParams.companyType = "2";
			this.queryParams.businessCode = "enterprisePictrue";
			this.queryParams.nature = this.newNature;
			this.queryParams.industry = this.newType;
			this.queryParams.deptName = this.dName;
			// this.queryParams.nature = this.newNature;
			// this.queryParams.industry = this.newType;
			// this.queryParams.deptName = this.dName;
			listDeptAll(this.queryParams).then(response => {
				this.items = response.rows;
				this.total = response.total;
			});
		},
	tabs1(e,value){
		this.items = []
		this.queryParams.companyType = "2";
		this.queryParams.businessCode = "enterprisePictrue";
		if(value=='不限'){
			this.queryParams.nature = undefined;
		}else{
			this.queryParams.nature = value;
		}
        listDeptAll(this.queryParams).then(response => {
			this.items = response.rows;
			this.total = response.total;
        });
		var tabs1=e.target.parentNode.childNodes;
		for (let i = 0; i < tabs1.length; i++) {
				tabs1[i].classList.remove("on");			
		}
		e.target.className="on";
	},
	tabs2(e,value){
		this.items = []
		this.queryParams.companyType = "2";
        this.queryParams.status = '0'
		if(value=='不限'){
			this.queryParams.industry = undefined;
		}else{
			this.queryParams.industry = value;
		}
        listDeptAll(this.queryParams).then(response => {
			this.items = response.rows;
			this.total = response.total;
        });
		var tabs2=e.target.parentNode.childNodes;
		for (let i = 0; i < tabs2.length; i++) {
				tabs2[i].classList.remove("on");			
		}
		e.target.className="on";
	},
		// tabs3(e,value){
		// 	this.queryParams.type = '1'
        //     this.queryParams.status = '0'
        //     this.queryParams.companyType = "1";
		// 	this.items = []
		// 	if(value=='不限'){
		// 		this.queryParams.area = undefined;
		// 	}else{
		// 		this.queryParams.area = value;
		// 	}
        //     listDeptAll(this.queryParams).then(response => {
		// 		this.items = response.rows;
		// 		this.total = response.total;
        //     });
		// 	var tabs3=e.target.parentNode.childNodes;
		// 	for (let i = 0; i < tabs3.length; i++) {
		// 			tabs3[i].classList.remove("on");			
		// 	}
		// 	e.target.className="on";
		// },
		handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
	  more_pl(e){
			if(e.target.className==="btns-pl"){
			  e.target.className="btns-pl on"
			}else{
			  e.target.className="btns-pl"
			}
			var more_pl = document.querySelector('.right1');
			//console.log(more_pl.className);
			if(more_pl.className==="right-pl right1"){
			  more_pl.className="right-pl right1 on"
			}else{
			  more_pl.className="right-pl right1"
			}
		},
		more_pl2(e){
			if(e.target.className==="btns-pl"){
			  e.target.className="btns-pl on"
			}else{
			  e.target.className="btns-pl"
			}
			var more_pl = document.querySelector('.right2');
			//console.log(more_pl.className);
			if(more_pl.className==="right-pl right2"){
			  more_pl.className="right-pl right2 on"
			}else{
			  more_pl.className="right-pl right2"
			}
		},
		// more_pl3(e){
		// 	if(e.target.className==="btns-pl"){
		// 	  e.target.className="btns-pl on"
		// 	}else{
		// 	  e.target.className="btns-pl"
		// 	}
		// 	var more_pl = document.querySelector('.right3');
		// 	//console.log(more_pl.className);
		// 	if(more_pl.className==="right-pl right3"){
		// 	  more_pl.className="right-pl right3 on"
		// 	}else{
		// 	  more_pl.className="right-pl right3"
		// 	}
		// },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // setHtmlFonts() {
    //   var rootElement = document.querySelector("html");
    //   rootElement.style.fontSize = "1px";
    // },
    // resizeWindow(){
    //  var screenWidth = window.innerWidth;
    //  var Zoom = screenWidth / 1920;
    //  document.body.style.zoom = Zoom.toFixed(2);
    // },
    // resizeWindow() {
    //   (function (doc, win) {
    //     var docEl = doc.documentElement,
    //       resizeEvt =
    //         "orientationchange" in window ? "orientationchange" : "resize",
    //       recalc = function () {
    //         var clientWidth = docEl.clientWidth;
    //         if (!clientWidth) return;
    //         docEl.style.fontSize = 1 * (clientWidth / 1920) + "px";
    //       };

    //     if (!doc.addEventListener) return;
    //     win.addEventListener(resizeEvt, recalc, false);
    //     doc.addEventListener("DOMContentLoaded", recalc, false);
    //   })(document, window);
    // },
    tab_mouseEnter(e) {
      e.target.className = "on";
    },
    tab_mouseLeave(e) {
      e.target.className = "";
    },
    radio3change(e){
      this.refreshList()
    },
    radio4change(e){
      this.refreshList()
    },
    route(e){
      this.$router.push(e.url)
    },
    
   
  },
  created() {
	this.getDeptList();
	//this.getArea();
    // this.setHtmlFonts();
    // this.resizeWindow();
    // this.resizeWindow();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border: none;
}
::v-deep .el-radio-button__inner {
  border: none;
}
.flex {
  display: flex;
}
.space-between {
  display: flex;
  justify-content: space-between;
}
.third{
  display: flex;
  justify-content:space-around;
  background-color: #f8f9fb;
  width: 1532rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20rem;
  padding: 20rem;
  .third-left{
    padding:100rem 20rem;
    width:622rem;
    .type{
      font-size:16rem;
      background-color:#E7F5ED;
      color:#79C39A;
      border:1px solid #79C39A;
      margin-right:20rem;
      padding:0rem 5rem;
      display: flex;
      align-items: center;
    }
    .title{
      margin-top:20rem;
      font-weight:bold;
      color:#000
    }
    .substance{
      margin-top:20rem;
      overflow-y: hidden;
			text-overflow: ellipsis;
			display:-webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-size: 14rem;
			margin-bottom: 30rem;
			margin-top:10px;
			color:#757F8F;
    }
    .add{
      display: flex;
      align-items: center;
      margin-top:20rem;
    }
  }
}
.forth{
	width:1532rem;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:30rem;
  margin-top:20rem
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #35a266;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #35a266;
}
/* 头尾公共样式 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote，th,
td {
  margin: 0;
  padding: 0;
}
ol,
ul {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

/* 回到顶部 end*/
.body-hp {
  height: 100%;
  width: 100%;
  /* font: 14rem arial; */
  font-size: 14rem;
  font-family: PingFang SC, Microsoft YaHei, Arial, sans-serif;
  color: #676767;
}
.top-content-pl{
	width: 100%;
}
.top-content-pl>.row-pl{
	box-shadow:0 0 6rem 0 rgba(0, 0, 0, .1);
	padding: 30rem;
	margin-top: 28rem;
	margin-bottom: 30rem;
}
.top-content-pl>.row-pl>.tabs-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 18rem;
}
.top-content-pl>.row-pl>.tabs-pl:last-child{
	margin-bottom: 0rem;
}
.top-content-pl>.row-pl>.tabs-pl>.left-pl{
	white-space: nowrap;
	padding-top: 4rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl{
	height: 30rem;
	overflow: hidden;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl.on{
	height: auto;
	overflow: auto;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li{
	margin-right: 40rem;
	padding: 3rem 8rem;
	cursor: pointer;
	margin-bottom: 5rem;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li.on{
	color: #12ba5e;
	background-color: #e9fff3;
}
.top-content-pl>.row-pl>.tabs-pl>.right-pl>li>span{
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl{
	padding-right: 22rem;
	background:url(../../assets/images/down.png) no-repeat scroll;
	background-position: right center;
	cursor: pointer;
	white-space: nowrap;
	height: 24rem;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on{
	padding-right: 22rem;
	background:url(../../assets/images/up.png) no-repeat scroll;
	background-position: right center;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>i{
	font-style: normal;
	display: none;
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl>span{
	pointer-events: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>span{
	display: none;
}
.top-content-pl>.row-pl>.tabs-pl>.btns-pl.on>i{
	font-style: normal;
	display: block;
}
.body-pl {
	/* font: 14rem arial; */
	font-size: 16rem;
	font-family:PingFang SC,Microsoft YaHei,Arial, sans-serif;
	color: #676767;
}
.row-pl{
	width:1532rem;
	margin: 0 auto;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
	border: none;
}
::v-deep .el-radio-button__inner {
	border: none;
}
</style>
